<style scoped lang="scss">
.el-input {
  width: 200px;
}

.el-form {
  margin-bottom: -15px;
}
</style>
<template>
  <div class='public_page'>
    <el-form inline :model="searchParams" ref="refSearchParams">
      <el-form-item label="关键词搜索">
        <el-input v-model="searchParams.searchCondition" placeholder="请输入出通单号/订单号/收货人姓名/收货地址/联系电话" clearable
          style="width: 400px" @clear="getTableList" />
      </el-form-item>
      <el-form-item label="订单日期">
        <el-date-picker v-model="date" type="daterange" start-placeholder="选择开始日期" end-placeholder="选择结束日期"
          value-format="YYYY-MM-DD" clearable @change="searchTableList" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="searchTableList">搜 索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Plus" @click="addShipping">新 增</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="未发布" name="unpublished"></el-tab-pane>
      <el-tab-pane label="已发布" name="published"></el-tab-pane>
    </el-tabs>
    <el-table style="height: 100%;" v-loading="loading" :row-key="id" v-on="tableEvent" v-bind="propsRes.table">
      <el-table-column type="expand">
        <template #default="props">
          <div class="">
            <el-table :data="props.row.orderGoods">
              <el-table-column align="center" label="出通单号" prop="shippingOrderNumber" />
              <el-table-column align="center" label="商品编码" prop="goodsCode" />
              <el-table-column align="center" label="规格型号" prop="goodsModel" />
              <el-table-column align="center" label="商品名字" prop="goodsName" />
              <el-table-column align="center" label="出货数量" prop="amout" />
              <el-table-column align="center" label="单位" prop="unit" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="orderTime" min-width="180px"
        label="订单日期"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="expectedTime" min-width="150px"
        label="预计出货日期"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="shippingOrderNumber" min-width="240px" label="出通单号">
        <template #default="scope">
          <el-button link @click="openDetail(scope.row.shippingOrderNumber)" type="primary">{{
            scope.row.shippingOrderNumber }}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="orderNumber" min-width="240px"
        label="订单号"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip min-width="150px" label="业务人员/业务部门">
        <template #default="scope">
          <span v-if="scope.row.businessPersonnel || scope.row.businessDepartment">
            {{ scope.row.businessPersonnel }}/{{ scope.row.businessDepartment }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="consignee" min-width="180px"
        label="收货人"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="phone" min-width="180px" label="联系电话"></el-table-column>
      <el-table-column align="center" v-if="activeName === 'published'" show-overflow-tooltip prop="shippingAddress" min-width="210px" label="发货地址"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="consigneeAddress" min-width="180px" label="收获地址"></el-table-column>
      <el-table-column v-if="activeName === 'published'" align="center" show-overflow-tooltip prop="productVolume" min-width="180px" label="产品总体积"></el-table-column>
      <el-table-column v-if="activeName === 'published'" align="center" show-overflow-tooltip prop="totalSquare" min-width="180px" label="总方数"></el-table-column>
      <el-table-column v-if="activeName === 'published'" align="center" show-overflow-tooltip prop="remark" min-width="180px" label="备注"></el-table-column>
      <el-table-column v-if="activeName === 'unpublished'" align="center" fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="issue(scope.row.shippingOrderNumber)">竞价发布</el-button>
          <el-button link type="primary" size="small"
            @click="directlyIssue(scope.row.shippingOrderNumber)">直接发布</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="public_pagination">
      <el-pagination v-bind="propsRes.pagination" v-on="paginationEvent" />
    </div>
    <Issue ref="formRef" @ok="getSuccess" @updateList="getTableList"></Issue>
    <directIssue ref="directIssueFormRef" @ok="getSuccess" @updateList="getTableList"></directIssue>
    <addShip ref="addShippingFormRef" @ok="getSuccess" @updateList="getTableList"></addShip>
    <showDetail ref="showDetailFormRef" @updateList="getTableList"></showDetail>
  </div>
</template>

<script setup>
import useTableProps from '@/hooks/tableList'
import Issue from '../components/Issue.vue'
import directIssue from "@/views/components/directissue.vue";
import addShip from "../components/addShip.vue"
import showDetail from "@/views/components/showDetail.vue";
import { postShippingfindPage } from '@/api/outOrder.js'
import { id } from "element-plus/es/locale/index";

const refSearchParams = ref(null)
const formRef = ref(null);
const directIssueFormRef = ref(null)
const addShippingFormRef = ref(null)
const showDetailFormRef = ref(null)
const activeName = ref('unpublished')

const searchParams = reactive({
  endDate: '',
  startDate: '',
  searchCondition: '',
  publishStatus: 'unpublished'
})

const handleClick = (tab) => {
  searchParams.publishStatus = tab.props.name
  searchTableList()
}

const { loading, propsRes, tableEvent, paginationEvent, tableRef, searchTableList, getTableList, date } = useTableProps({
  searchParams,
  url: postShippingfindPage
})

const getSuccess = () => {
  getTableList();
};

onMounted((tab) => {
  getTableList()
})

const issue = (shippingOrderNumber) => {
  console.log(shippingOrderNumber)
  formRef.value.getParent(shippingOrderNumber);
};

const addShipping = () => {
  addShippingFormRef.value.getParent();
}

const directlyIssue = (shippingOrderNumber) => {
  console.log(shippingOrderNumber)
  directIssueFormRef.value.getParent(shippingOrderNumber);
}

const openDetail = (shippingOrderNumber) => {
  showDetailFormRef.value.getParent(shippingOrderNumber);
}
</script>